<template>
  <div class="page">
      <div class="contentWrapper home" v-show="!isFocusTerm && (!searchTerm || searchTerm == '')">
        <div class="logo">
            <img src="../imgs/logo.png" alt="">
        </div>
        <div class="searchForm" @click.stop="focusTerm">
            <input type="text" name="searchTerm" class="searchTerm" placeholder="输入您的问题">
            <div class="searchIcon search">
                <img class="img" src="../imgs/icons/btn-search.png" alt="search button" v-if="isPhone">
                <i class="fa fa-search fa-2x" aria-hidden="true" v-else></i>
            </div>
            <div class="clearFix"></div>
        </div>
        <div class="microphone">
            <img class="img" src="../imgs/icons/btn-mic.png" alt="search button">
        </div>
        <!-- <div class="intro">
            涵盖中国全部法律领域的所有法律渊源，包括法律、行政法规、司法解释、部门规章及其他规范性文件，以及立法说明、学术文章；以每一个法律条文为“元规则”，对所有的法律渊源进行结构化重构，形成支持智能检索的“元规则大脑”；支持自然语言检索以及语音输入。
        </div> -->
        </div>
    <div class="contentWrapper list" v-show="isFocusTerm || (searchTerm && searchTerm != '')">
        <div class="top-search">
            <div class="logo-icon" @click.stop="clearSearch">
            <img src="../imgs/icons/logo-mini.png" alt="">
            </div>
            <div class="searchForm" :class="{focus:isFocusTerm}">
                <div class="searchIcon" @click="focusTerm" v-show="!isFocusTerm">
                    <img class="img" src="../imgs/icons/btn-search.png" alt="search button">
                </div>
                <textarea @keyup.enter="sendSearchRequest()" ref="searchTerm" @focus="changeFocusStatus(true)" @blur="changeFocusStatus(false)" type="text" name="searchTerm" class="searchTerm" v-model="searchTerm">
                </textarea>
                <div ref="hiddenTerm" class="hiddenTerm">{{searchTerm}}</div>
                <div class="cancelBtn" v-show="isFocusTerm && searchTerm && searchTerm != ''" @click.stop="clearTerm">
                    <img src="../imgs/icons/cancel.png" alt="">
                </div>
                <div class="clearFix">

                </div>
            </div>
            <div class="searchBtn" v-show="isFocusTerm" @click.stop="sendSearchRequest()">
                搜索
            </div>
            <div class="clearFix"></div>
        </div>
        <transition name="fadeList">
            <div class="casesList" v-if="casesList && casesList[0]">
                <div class="title"><div>小直猜您想找</div></div>
                <div class="list">
                    <div class="caseItem" v-for="(caseItem, index) in casesList" :key="index">
                        <div @click="redirect('Case', index)" class="parentItem" v-if="caseItem.parent[0]" v-for="(parentItem, indexParent) in caseItem.parent" :key="indexParent">
                            <div class="currentTitle" v-if="indexParent == caseItem.parent.length - 1">
                                {{caseItem.title3}}
                            </div>
                            <!-- <div :style="'padding-left:'+ (indexParent * 0.2) +'rem;'" class="parentTitle" v-else>
                                {{parentItem.t}}
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
        </transition>
      <div class="waitData" v-if="!casesList || !casesList[0]">
          {{waitText}}
      </div>
    </div>
  </div>
</template>
<script>
var vm;
export default {
    data() {
        return {
            searchTerm: '',
            currentNodeIndex: -1,
            casesList: null,
            isFocusTerm: false
        }
    },
    computed: {
        waitText() {
            if(this.casesList && this.casesList.length == 0) {
                return "无搜索结果";
            } else {
                return "等待搜索..."
            }
        },
        isPhone(){
            return document.body.clientWidth < 920;
        }
    },
    watch: {
        searchTerm() {
            this.$nextTick(()=>{
                this.setTermDomHeight();
            })
        }
    },
    created: function(){
        vm = this;

        vm.searchTerm = vm.$route.params.searchTerm||'';

        vm.sendSearchRequest();
    },
    mounted() {
    },
    methods: {
        clearSearch() {  
            this.searchTerm = "";
            this.sendSearchRequest();
        },
        clearTerm() {
            this.searchTerm = "";
            this.focusTerm();
        },
        focusTerm() {
            this.isFocusTerm = true;
            this.$nextTick(() => {
                this.$refs.searchTerm.focus();
            });
        },
        changeFocusStatus(status) {
            this.$nextTick(()=>{
                this.isFocusTerm = status;
                this.setTermDomHeight();
            })
        },
        setTermDomHeight() {
            this.$refs.searchTerm.style.height = "auto";
            //不然会不断撑大
            if (this.isFocusTerm) {
                if(this.isPhone) {
                    this.$refs.searchTerm.style.height = this.$refs.hiddenTerm.scrollHeight/100 + "rem";
                }else {
                    this.$refs.searchTerm.style.height = this.$refs.hiddenTerm.scrollHeight + "px";
                }
            }
        },
        redirect: function (pageName, caseIndex) {
            var caseData = vm.casesList[caseIndex];
            console.log(caseData);

            //改变 vuex 记录本页参数，解决离开后回退问题
            var params = {searchTerm: vm.searchTerm};
            var paramsKeyValue = {key:vm.$route.name, value:params}
            vm.$store.commit('refreshParams', paramsKeyValue);
            console.log('tag', caseData)
            vm.$router.push({ name: pageName, query: {idx: caseData.idx, qid: caseData.id, term: vm.searchTerm}});
        },
        changeCurrentNodeIndex(index) {
            if (vm.currentNodeIndex == index) {
                vm.currentNodeIndex = -1;
            }else {
                vm.currentNodeIndex = index;
            }
        },
        sendSearchRequest() {
            if (vm.searchTerm) {
                vm.searchTerm = vm.searchTerm.trim();
                axios.get(global.SERVER + '/api/q/'+vm.searchTerm)
                    .then(function (response) {
                        vm.casesList = response.data;
                        console.log(vm.casesList);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }else {
                vm.casesList = null;
            }
        }
    }
}
</script>
<style lang="scss" scoped>
@media screen and (min-width: 920px) {
    .contentWrapper.home {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
    .logo {
        padding-top: 231px;
        img {
            width: 208px;
        }
        }
        .searchForm {
        width: 685px;
        height: 53px;
        margin: 64px auto 0;
        padding: 5px;
        border: 1px solid #F66001;
        border-radius: 5px;
        position: relative;
        box-sizing: border-box;
        .searchTerm {
            border: none;
            color: #6b3c34;
            background: transparent;
            width: 100%;
            height: 43px;
            line-height: 43px;
            font-size: 20px;
            float: left;
            box-sizing: border-box;
            padding: 0 120px 0 0;
            caret-color: #F66001;
            &:focus {
            outline:none;
            }
        }
        .cancelBtn {
            position: absolute;
            top: .04rem;
            right: .4rem;
        }
        .searchIcon {
            cursor: pointer;
            width: 120px;
            height: 53px;
            padding-top: 8px;
            box-sizing: border-box;
            background: #f66001;
            position: absolute;
            .img {
            width: .2rem;
            }
            &.search {
                right: 0;
                top: 0;
                color: #fff;
            }
        }
        }
        .microphone {
            display: none;
        }
        .clearFix {
        clear: both;
        }
    }

    .contentWrapper.list {
        max-width: 920px;
        margin: 0 auto;
        .fadeList-enter-active, .fadeList-leave-active {
        transition: opacity .3s ease;
        }
        .fadeList-enter, .fadeList-leave-active {
        opacity: 0
        }
        .logo-icon {
        cursor: pointer;
        margin: 42px 57px;
        float: left;
        img {
            width: 104px;
        }
        }
        .top-search {
            border-bottom: 1px solid #F6F6F6;
            background-color: #fff;
        }
        .searchForm {
        float: left;
        overflow: hidden;
        position: relative;
        width: 685px;
        height: 53px;
        margin: 68px auto 0;
        padding: 14px 12px;
        border: 1px solid #F66001;
        border-radius: 5px;
        box-sizing: border-box;
        .searchTerm {
            overflow: hidden;
            border: none;
            color: #000;
            background: transparent;
            min-height: 20px;
            height: 20px;
            width: 88%;
            margin-left: .6px;
            line-height: 20px;
            font-size: 20px;
            float: left;
            caret-color: #F66001;
            &:focus {
            outline:none;
            width: 535px;
            }
        }
        .hiddenTerm {
            border: none;
            color: #000;
            background: transparent;
            width: 88%;
            margin-left: 6px;
            line-height: 20px;
            font-size: 20px;
            float: left;
            visibility: hidden;
            position: absolute;
            z-index: -9;
            caret-color: #F66001;
            height: 0;
        }
        .cancelBtn {
            visibility: hidden;
            position: absolute;
            bottom: 2px;
            right: 4px;
        }
        .searchIcon {
            padding: 2px;
            float: left;
            .img {
                width: 18px;
                height: 18px;
            }
        }
        &.focus {
            width: 565px;
            height: auto;
        }
        }
        .searchBtn {
            cursor: pointer;
            float: left;
            margin: 68px 0 68px 24px;
            font-size: 20px;
            height: 53px;
            line-height: 53px;
            color: #F66001;
        }
        .casesList {
            box-sizing: border-box;
            text-align: left;
            margin: 0 auto 0 228px;
            padding-top: 23px;
            height: fill-available;
            .title {
                font-size: 24px;
                color: #f66501;
                border-bottom: 1px solid #979797;
                div {
                    padding-bottom: 4px;
                    border-bottom: 5px solid #f66001;
                    display: inline-block;
                }
            }
            .list {
                margin: 10px 0;
                padding: 6px 0;
                background-color: #fff;
            }
            .caseItem {
                cursor: pointer;
                font-size: 16px;
                color: #000;
                background: url(../imgs/icons/dot-list.png) 0 center no-repeat;
                background-size: 8px;
                padding: 4px 16px;
            }
            
        }
        .waitData {
            margin-top: 180px;
            font-size: 42px;
            color: rgba(0,0,0,0.1);
        }
        .clearFix {
        clear: both;
        }
    }
}
@media screen and (max-width: 919px) {
.contentWrapper.home {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  .logo {
    // padding-top: 1.8rem;
    padding-top: 1rem;
    img {
        width: 1.51rem;
    }
    }
    .searchForm {
    width: 3.45rem;
    height: .38rem;
    margin: .46rem auto 0;
    padding: .04rem;
    background: #efeff0;
    border: 1px solid #F66001;
    border-radius: 5px;
    position: relative;
    box-sizing: border-box;
    .searchTerm {
        border: none;
        color: #6b3c34;
        background: transparent;
        width: 100%;
        height: .3rem;
        line-height: .3rem;
        font-size: .2rem;
        float: left;
        box-sizing: border-box;
        padding: 0 .3rem 0 0;
        caret-color: #F66001;
        &:focus {
        outline:none;
        }
    }
    .cancelBtn {
        position: absolute;
        top: .04rem;
        right: .4rem;
    }
    .searchIcon {
        width: .2rem;
        height: .2rem;
        padding-top: .05rem;
        position: absolute;
        .img {
        width: .2rem;
        }
        &.search {
        right: .1rem;
        }
    }
    }
    .microphone {
    margin-top: .8rem;
    .img {
        width: .52rem;
        height: .52rem;;
    }
    }
    .clearFix {
    clear: both;
    }
}

.contentWrapper.list {
    .fadeList-enter-active, .fadeList-leave-active {
    transition: opacity .3s ease;
    }
    .fadeList-enter, .fadeList-leave-active {
    opacity: 0
    }
    .logo-icon {
    margin: .12rem .1rem;
    float: left;
    img {
        width: .36rem;
    }
    }
    .top-search {
        border-bottom: 1px solid #F6F6F6;
        background-color: #fff;
    }
    .searchForm {
    float: left;
    overflow: hidden;
    position: relative;
    margin: .12rem .1rem;
    height: .38rem;
    width: 2.9rem;
    box-sizing: border-box;
    background: #efeff0;
    border: 1px solid #F66001;
    border-radius: 5px;
    padding: .11rem;
    .searchTerm {
        border: none;
        color: #000;
        background: transparent;
        min-height: .16rem;
        height: .16rem;
        width: 88%;
        margin-left: .06rem;
        line-height: .16rem;
        font-size: .16rem;
        float: left;
        caret-color: #F66001;
        &:focus {
        outline:none;
        width: 2.22rem;
        }
    }
    .hiddenTerm {
        border: none;
        color: #000;
        background: transparent;
        width: 88%;
        margin-left: .06rem;
        line-height: .16rem;
        font-size: .16rem;
        float: left;
        visibility: hidden;
        position: absolute;
        z-index: -9;
        caret-color: #F66001;
        height: 0;
    }
    .cancelBtn {
        position: absolute;
        bottom: .02rem;
        right: .04rem;
    }
    .searchIcon {
        padding: .02rem;
        float: left;
        .img {
            width: .14rem;
            height: .14rem;
        }
    }
    &.focus {
        width: 2.52rem;
        height: auto;
    }
    }
    .searchBtn {
        float: left;
        margin: .12rem 0;
        font-size: .16rem;
        height: .38rem;
        line-height: .38rem;
        color: #F66001;
    }
    .casesList {
        box-sizing: border-box;
        text-align: left;
        background-color: #F6F6F6;
        margin: 0 auto;
        padding-top: .18rem;
        height: fill-available;
        .title {
            font-size: .14rem;
            color: #929297;
            margin-left: .1rem;
            margin-bottom: .16rem;
        }
        .list {
            margin: .1rem;
            padding: .06rem .24rem;
            background-color: #fff;
        }
        .caseItem {
            font-size: .14rem;
            color: #000;
            background: url(../imgs/icons/dot-list.png) 0 center no-repeat;
            background-size: .04rem;
            padding: .04rem .16rem;
        }
        
    }
    .waitData {
        margin-top: 2.8rem;
        font-size: .42rem;
        color: rgba(0,0,0,0.1);
    }
    .clearFix {
    clear: both;
    }
}
}
</style>
